<!-- 数据监测 -->
<template>
  <div class="data_monitor">
    <el-form
      :inline="true"
      :model="dataForm"
      @keyup.enter.native="getDataList()"
    >
      <el-form-item>
        <el-input
          v-model="dataForm.department"
          placeholder="部门"
          clearable
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-input
          v-model="dataForm.machineName"
          placeholder="机器名"
          clearable
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-input
          v-model="dataForm.monitorParam"
          placeholder="参数"
          clearable
        ></el-input>
      </el-form-item>
      <el-form-item label="监测参数">
        <el-select v-model="dataForm.monitorParam" placeholder="请选择监测参数">
          <el-option label="温度" value="temperature"></el-option>
          <el-option label="湿度" value="humidity"></el-option>
          <el-option label="烟雾传感器" value="smokeSensor"></el-option>
          <el-option label="漏水监测仪" value="waterLeakage"></el-option>
          <el-option label="红外监测器" value="infraRed"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button @click="getDataList()">查询</el-button>
      </el-form-item>
    </el-form>

    <div class="cardhh">
      <el-row :gutter="25">
        <el-col :lg="8" :xs="12" v-for="(item, o) in this.dataList" :key="o">
          <div class="oneCard">
            <el-card class="box-card" shadow="hover">
              <div slot="header" class="clearfix">
                <h3>{{ item.paramKey }}</h3>
              </div>
              <div>
                <img v-if="settemflag(item.imageParam)" :src="temimagee" />
                <img v-if="sethumflag(item.imageParam)" :src="humimagee" />
                <img v-if="setsmoflag(item.imageParam)" :src="smoimagee" />
                <img v-if="setwatflag(item.imageParam)" :src="watimagee" />
                <img v-if="setinfflag(item.imageParam)" :src="infimagee" />
                <p style="float: right; font-size: 25px">
                  {{ item.paramValue }}
                </p>
              </div>
            </el-card>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      dataForm: {
        department: "",
        machineName: "",
        monitorParam: "",
      },
      dataList: [],
      list: [
        { paramKey: 1, paramValue: 2 },
        { paramKey: 2, paramValue: 2 },
      ],
      flag: true,
      temimagee: require("@/assets/img/n1.png"),
      humimagee: require("@/assets/img/n2.png"),
      smoimagee: require("@/assets/img/n3.png"),
      watimagee: require("@/assets/img/n4.png"),
      infimagee: require("@/assets/img/n5.png"),
    };
  },

  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    // 获取菜单
    getDataList() {
      this.$http({
        url: this.$http.adornUrl("/monitormanage/machine/monitor/apply"),
        method: "get",
        params: this.$http.adornParams({
          department: this.dataForm.department,
          machineName: this.dataForm.machineName,
          monitorParam: this.dataForm.monitorParam,
        }),
      }).then(({ data }) => {
        console.log("sss", data);
        if (data && data.code === 0) {
          this.dataList = data.data;
        } else {
          this.dataList = [];
        }
      });
    },

    settemflag(im) {
      if (im === 1) return true;
    },

    sethumflag(im) {
      if (im === 2) return true;
    },

    setsmoflag(im) {
      if (im === 3) return true;
    },

    setwatflag(im) {
      if (im === 4) return true;
    },

    setinfflag(im) {
      if (im === 5) return true;
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {
    this.getDataList();
  }, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style>
.box-card {
  width: 480px;
}
</style>